<template>
  <div>
    <div id="home" ref="targetDom">
      <!-- <div contenteditable="true" id="testDiv" class="test"></div> -->
      <!-- <img src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Ftu1.whhost.net%2Fuploads%2F20181229%2F12%2F1546056170-YerLnctOdk.jpg&refer=http%3A%2F%2Ftu1.whhost.net&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1622853811&t=cd32184167844685b3b0f0594c8e20d2" crossorigin="anonymous" alt="">
      <p>=======================</p>
      <img src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fimg.jk51.com%2Fimg_jk51%2F318195719.jpeg&refer=http%3A%2F%2Fimg.jk51.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1622853811&t=941db92391cb1c456c33ab7729c31de6" crossorigin="anonymous" alt="">
      <p>------------------------</p>
      <img src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fimg.taopic.com%2Fuploads%2Fallimg%2F110814%2F6351-110Q401440269.jpg&refer=http%3A%2F%2Fimg.taopic.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1622853811&t=be82ce42d65d59626c13e03dc1546743" crossorigin="anonymous" alt="">
      <p>===========================</p>
      <img src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fpic.haixia51.com%2Fpic%2F%3Fp%3D%2Fqianqianhua%2F20180518%2F03%2F1526584446-sCbcMZpqBK.jpg&refer=http%3A%2F%2Fpic.haixia51.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1622853811&t=ddcb4fb2c50590b0c394b2d347d9ea1f" crossorigin="anonymous" alt="">
      <p>----------------------------</p>
      <img src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fsearchfoto.ru%2Fimg%2FxyygpKbDS1y8pTjXWy83VS8rMS9fLSy3RL8mwz0yx9fcM0NMNCvT2DCopdHbKKzRy97YwyzUMrir3SPQNV0vMLbAutzUyNgCzMmwNzSGsomJbQzCjIDnHNgUMwNx8W1OIMNBoQz1DAA.jpg&refer=http%3A%2F%2Fsearchfoto.ru&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1622853811&t=5627a71d1335cd11bfbb5b7aadfa087e" crossorigin="anonymous" alt=""> -->
      <el-button size="small" type="primary" @click="handleDownloadPDF"
        >点击</el-button
      >
      <!-- 单轴 柱状图 折线图 -->
      <div class="chartDiv target-node-item">
        <chart
          chartId="myChart"
          :chartOptions="chartOptions"
          :chartStyle="{ width: '50%', height: '300px' }"
        ></chart>
      </div>
      <div class="chartDiv target-node-item">
        <chart
          chartId="myChart1"
          :chartOptions="chartOptions0"
          :chartStyle="{ width: '100%', height: '300px' }"
        ></chart>
      </div>
      <div contenteditable="true" class="editableDiv target-node-item"></div>
      <div class="chartDiv target-node-item">
        <chart
          chartId="myChart2"
          :chartOptions="chartOptions1"
          :chartStyle="{ width: '50%', height: '300px' }"
        ></chart>
      </div>
      <div class="chartDiv target-node-item">
        <chart
          chartId="myChart5"
          :chartOptions="chartOptions5"
          :chartStyle="{ width: '50%', height: '300px' }"
        ></chart>
      </div>
      <div contenteditable="true" class="editableDiv target-node-item"></div>
      <div class="chartDiv target-node-item">
        <chart
          chartId="myChart7"
          :chartOptions="chartOptions7"
          :chartStyle="{ width: '50%', height: '300px' }"
        ></chart>
      </div>
      <div class="chartDiv target-node-item">
        <chart
          chartId="myChart6"
          :chartOptions="chartOptions6"
          :chartStyle="{ width: '50%', height: '300px' }"
        ></chart>
      </div>
      <div contenteditable="true" class="editableDiv target-node-item"></div>
      <div class="chartDiv target-node-item">
        <chart
          chartId="myChart11"
          :chartOptions="chartOptions0"
          :chartStyle="{ width: '100%', height: '300px' }"
        ></chart>
      </div>
      <div class="chartDiv target-node-item">
        <chart
          chartId="myChart12"
          :chartOptions="chartOptions1"
          :chartStyle="{ width: '50%', height: '300px' }"
        ></chart>
      </div>
      <div class="chartDiv target-node-item">
        <chart
          chartId="myChart13"
          :chartOptions="chartOptions5"
          :chartStyle="{ width: '50%', height: '300px' }"
        ></chart>
      </div>
      <div class="chartDiv target-node-item">
        <chart
          chartId="myChart14"
          :chartOptions="chartOptions0"
          :chartStyle="{ width: '100%', height: '300px' }"
        ></chart>
      </div>
      <div contenteditable="true" class="editableDiv target-node-item"></div>
      <div class="chartDiv target-node-item">
        <chart
          chartId="myChart15"
          :chartOptions="chartOptions1"
          :chartStyle="{ width: '50%', height: '300px' }"
        ></chart>
      </div>
      <div class="chartDiv target-node-item">
        <chart
          chartId="myChart16"
          :chartOptions="chartOptions5"
          :chartStyle="{ width: '50%', height: '300px' }"
        ></chart>
      </div>
      <div class="chartDiv target-node-item">
        <chart
          chartId="myChart17"
          :chartOptions="chartOptions0"
          :chartStyle="{ width: '100%', height: '300px' }"
        ></chart>
      </div>
      <div contenteditable="true" class="editableDiv target-node-item"></div>
      <div class="chartDiv target-node-item">
        <chart
          chartId="myChart18"
          :chartOptions="chartOptions1"
          :chartStyle="{ width: '50%', height: '300px' }"
        ></chart>
      </div>
      <div class="chartDiv target-node-item">
        <chart
          chartId="myChart19"
          :chartOptions="chartOptions5"
          :chartStyle="{ width: '50%', height: '300px' }"
        ></chart>
      </div>
      <div class="chartDiv target-node-item">
        <chart
          chartId="myChart20"
          :chartOptions="chartOptions0"
          :chartStyle="{ width: '100%', height: '300px' }"
        ></chart>
      </div>
      <div contenteditable="true" class="editableDiv target-node-item"></div>
      <div class="chartDiv target-node-item">
        <chart
          chartId="myChart21"
          :chartOptions="chartOptions1"
          :chartStyle="{ width: '50%', height: '300px' }"
        ></chart>
      </div>
      <div class="chartDiv target-node-item">
        <chart
          chartId="myChart22"
          :chartOptions="chartOptions5"
          :chartStyle="{ width: '50%', height: '300px' }"
        ></chart>
      </div>
      <div class="chartDiv target-node-item">
        <chart
          chartId="myChart23"
          :chartOptions="chartOptions0"
          :chartStyle="{ width: '100%', height: '300px' }"
        ></chart>
      </div>
      <div class="chartDiv target-node-item">
        <chart
          chartId="myChart24"
          :chartOptions="chartOptions1"
          :chartStyle="{ width: '50%', height: '300px' }"
        ></chart>
      </div>
      <div class="chartDiv target-node-item">
        <chart
          chartId="myChart25"
          :chartOptions="chartOptions5"
          :chartStyle="{ width: '50%', height: '300px' }"
        ></chart>
      </div>
      <div class="chartDiv target-node-item">
        <chart
          chartId="myChart26"
          :chartOptions="chartOptions0"
          :chartStyle="{ width: '100%', height: '300px' }"
        ></chart>
      </div>
      <div class="chartDiv target-node-item">
        <chart
          chartId="myChart27"
          :chartOptions="chartOptions1"
          :chartStyle="{ width: '50%', height: '300px' }"
        ></chart>
      </div>
      <div class="chartDiv target-node-item">
        <chart
          chartId="myChart28"
          :chartOptions="chartOptions5"
          :chartStyle="{ width: '50%', height: '300px' }"
        ></chart>
      </div>
      <div contenteditable="true" class="editableDiv target-node-item"></div>
      <div class="chartDiv target-node-item">
        <chart
          chartId="myChart29"
          :chartOptions="chartOptions0"
          :chartStyle="{ width: '100%', height: '300px' }"
        ></chart>
      </div>
      <div class="chartDiv target-node-item">
        <chart
          chartId="myChart30"
          :chartOptions="chartOptions1"
          :chartStyle="{ width: '50%', height: '300px' }"
        ></chart>
      </div>
      <div class="chartDiv target-node-item">
        <chart
          chartId="myChart31"
          :chartOptions="chartOptions5"
          :chartStyle="{ width: '50%', height: '300px' }"
        ></chart>
      </div>
    </div>
  </div>
</template>

<script>
import {
  singleShaftBarLineOptions,
  doubleShaftBarLineOptions,
  lineOptions,
  barOptions,
  pieOptions,
} from "./chart.js";
import html2Canvas from "html2canvas";
import JsPDF from "jspdf";
import chart from "./chart.vue";
// import { mapState } from "vuex";
export default {
  components: { chart },
  name: "Home",
  computed: {
    newSingleShaftBarLineOptions() {
      return singleShaftBarLineOptions;
    },
    newDoubleShaftBarLineOptions() {
      return doubleShaftBarLineOptions;
    },
    newLineOptions() {
      return lineOptions;
    },
    newBarOptions() {
      return barOptions;
    },
    newPieOptions() {
      return pieOptions;
    },
  },
  data() {
    return {
      barSerie: {},
      chartOptions: {},
      chartOptions0: {},
      chartOptions1: {},
      chartOptions5: {},
      chartOptions6: {},
      chartOptions7: {},
      // chartOptions2: {
      //   tooltip: {
      //     trigger: "item",
      //   },
      //   // legend: {
      //   //   top: "5%",
      //   //   left: "center",
      //   // },
      //   series: [
      //     {
      //       name: "访问来源",
      //       type: "pie",
      //       radius: ["40%", "70%"],
      //       avoidLabelOverlap: true,
      //       //     tooltip: {
      //       //   trigger: "item",
      //       // },
      //       // label: {
      //       //   show: true,
      //       //   position: "center",
      //       // },
      //       emphasis: {
      //         // label: {
      //         //   show: false,
      //         //   fontSize: "20",
      //         //   fontWeight: "bold",
      //         // },
      //       },
      //       labelLine: {
      //         show: true,
      //       },
      //       data: [
      //         { value: 1048, name: "搜索引擎" },
      //         { value: 735, name: "直接访问" },
      //         { value: 580, name: "邮件营销" },
      //         { value: 484, name: "联盟广告" },
      //         { value: 300, name: "视频广告" },
      //       ],
      //     },
      //   ],
      // },
      // chartOptions3: {
      //   title: {
      //     text: "某站点用户访问来源",
      //     left: "center",
      //   },
      //   tooltip: {
      //     trigger: "item",
      //   },
      //   legend: {
      //     orient: "vertical",
      //     left: "left",
      //   },
      //   series: [
      //     {
      //       name: "访问来源",
      //       type: "pie",
      //       radius: "50%",
      //       data: [
      //         { value: 1048, name: "搜索引擎" },
      //         { value: 735, name: "直接访问" },
      //         { value: 580, name: "邮件营销" },
      //         { value: 484, name: "联盟广告" },
      //         { value: 300, name: "视频广告" },
      //       ],
      //       emphasis: {
      //         itemStyle: {
      //           shadowBlur: 10,
      //           shadowOffsetX: 0,
      //           shadowColor: "rgba(0, 0, 0, 0.5)",
      //         },
      //       },
      //     },
      //   ],
      // },
    };
  },
  created() {
    // bar + line
    // bar double
    // pie
    //
    // let barLineParams = {
    //   type:""
    // }

    const singleBarLineObj = {
      titleText: "研发规模(人月)",
      titleSubText: "",
      legendData: ["研发规模", "近半年平均值"],
      xAxisData: [
        "2020-09",
        "2020-10",
        "2020-11",
        "2020-12",
        "2021-01",
        "2021-02",
        "2021-03",
        "2021-04",
      ],
      seriesBarData: [
        "3042",
        "1538",
        "4401",
        "2878",
        "3106",
        "1731",
        "3693",
        "3117",
      ],
      seriesBarName: "研发规模",
      serLineData: [
        "2783.4",
        "2783.4",
        "2783.4",
        "2783.4",
        "2783.4",
        "2783.4",
        "2783.4",
        "2783.4",
      ],
      seriesLineName: "近半年平均值",
    };
    this.chartOptions = this.newSingleShaftBarLineOptions(singleBarLineObj);

    const doubleBarLineObj = {
      titleText: "3月版团队产出情况",
      titleSubText: "",
      legendData: ["研发规模(人月)", "主办需求数(单)"],
      xAxisData: [
        "金市",
        "卡核心",
        "公司",
        "信贷",
        "卡经营",
        "运营",
        "零售",
        "开放银行",
        "互联网",
        "财务",
        "数据平台",
        "卡智能",
        "数据业务",
        "内管",
        "数据报送",
        "核心",
        "中台",
        "数据智能",
      ],
      seriesBarData: [
        "344",
        "337",
        "329",
        "326",
        "318",
        "297",
        "286",
        "252",
        "237",
        "161",
        "155",
        "150",
        "132",
        "126",
        "78",
        "71",
        "61",
        "50",
      ],
      seriesBarName: "研发规模(人月)",
      serLineData: [
        "60",
        "52",
        "58",
        "54",
        "55",
        "64",
        "67",
        "80",
        "46",
        "25",
        "57",
        "38",
        "28",
        "30",
        "17",
        "39",
        "15",
        "12",
      ],
      seriesLineName: "主办需求数(单)",
    };
    this.chartOptions0 = this.newDoubleShaftBarLineOptions(doubleBarLineObj);

    const lineOptionsObj = {
      titleText: "首次冒烟通过率(%)",
      xAxisData: [
        "2020-09",
        "2020-10",
        "2020-11",
        "2020-12",
        "2021-01",
        "2021-02",
        "2021-03",
      ],
      series: [
        {
          type: "line",
          data: ["0.2", "0.2", "0", "0.2", "0.1", "0", "0.1"],
          label: {
            show: true,
            position: "outside",
          },
        },
        {
          type: "line",
          data: ["0.3", "0.4", "0.2", "0.6", "0.7", "0.1", "0.9"],
          label: {
            show: true,
            position: "outside",
          },
        },
      ],
      serLineData: ["0.2", "0.2", "0", "0.2", "0.1", "0", "0.1"],
    };
    this.chartOptions1 = this.newLineOptions(lineOptionsObj);
    const barOptionsObj = {
      titleText: "需求全周期-时长分布(单，占比)",
      xAxisData: [
        "1个月内",
        "1-2个月",
        "2-3个月",
        "3-4个月",
        "5-6个月",
        "6个月以上",
      ],
      series: [
        {
          type: "bar",
          data: [120, 200, 150, 80, 70, 110, 130],
          label: {
            show: true,
            position: "outside",
          },
          markLine: {
            symbol:'none',
            data: [{ type: "average", name: "平均值" }],
            itemStyle: {
              normal: {
                lineStyle: {
                  type: "solid",
                  color: "blue",
                },
                label: {
                  show: true,
                  position: "middle",
                  formatter: "近半年平均值 : " + 80,
                },
              },
            },
          },
        },
        {
          type: "bar",
          data: [120, 200, 150, 80, 70, 110, 130],
          label: {
            show: true,
            position: "outside",
          },
        },
        {
          type: "line",
          data: [120, 200, 150, 80, 70, 110, 130],
          label: {
            show: true,
            position: "outside",
          },
        },
      ],
    };
    this.chartOptions5 = this.newBarOptions(barOptionsObj);

    const pieOptionsObj = {
      seriesPieData: [
        { value: 5, name: "环境问题" },
        { value: 2, name: "投产方案" },
        { value: 11, name: "编码问题" },
      ],
    };
    this.chartOptions6 = this.newPieOptions(pieOptionsObj);
    const barOptionsObj1 = {
      titleText: "需求全周期-时长分布(单，占比)",
      xAxisData: [
        "1个月内",
        "1-2个月",
        "2-3个月",
        "3-4个月",
        "5-6个月",
        "6个月以上",
      ],
      legendData: ["nan", "feng"],
      series: [
        {
          type: "bar",
          name: "nan",
          data: [120, 200, 150, 80, 70, 110, 130],
          stack: "total",
          emphasis: {
            focus: "series",
          },
          label: {
            show: true,
            position: "outside",
          },
        },
        {
          type: "bar",
          stack: "total",
          name: "feng",
          data: [120, 200, 150, 80, 70, 110, 130],
          emphasis: {
            focus: "series",
          },
          label: {
            show: true,
            position: "outside",
          },
        },
        {
          type: "line",
          data: [100, 200, 150, 80, 70, 110, 130],
          label: {
            show: true,
            position: "outside",
          },
        },
      ],
    };
    this.chartOptions7 = this.newBarOptions(barOptionsObj1);
  },
  methods: {
    handleDownloadPDF() {
      let params = {
        title: "下载报告",
        name: "zhudying",
        code: "001",
      };
      const A4_WIDTH = 592.28;
      const A4_HEIGHT = 841.89;
      let targetDom = document.getElementById("home");
      window.pageYoffset = 0;
      document.documentElement.scrollTop = 0;
      document.body.scrollTop = 0;
      let pageHeight = (targetDom.scrollWidth / A4_WIDTH) * A4_HEIGHT;
      let lableListID = document.getElementsByClassName("target-node-item");
      for (let i = 0; i < lableListID.length; i++) {
        let multiple = Math.ceil(
          (lableListID[i].offsetTop + lableListID[i].offsetHeight) / pageHeight
        );
        if (this.isSplit(lableListID, i, multiple * pageHeight)) {
          let divParent = lableListID[i].parentNode; // 获取该div的父节点
          let newNode = document.createElement("div");
          newNode.style.background = "#ffffff";
          let _H =
            multiple * pageHeight -
            (lableListID[i].offsetTop + lableListID[i].offsetHeight);
          newNode.style.height = _H + 50 + "px";
          let next = lableListID[i].nextSibling; // 获取div的下一个兄弟节点
          // 判断兄弟节点是否存在
          if (next) {
            // 存在则将新节点插入到div的下一个兄弟节点之前，即div之后
            divParent.insertBefore(newNode, next);
          } else {
            // 不存在则直接添加到最后,appendChild默认添加到divParent的最后
            divParent.appendChild(newNode);
          }
        }
      }

      html2Canvas(targetDom, {
        scale: 1, // 提升画面质量，但是会增加文件大小
        useCORS: true, // 允许跨域图片 当图片是链接地址时，需加该属性，否组无法显示图片
        imageTimeout: 0, // 图片加载延迟，默认延迟为0，单位毫秒
        height: targetDom.scrollHeight, // canvas的高度设定
        width: targetDom.scrollWidth, // canvas的宽度设定
      }).then((canvas) => {
        // a4纸的尺寸[592.28,841.89]

        let contentWidth = canvas.width;
        let contentHeight = canvas.height;
        let pageData = canvas.toDataURL("image/jpeg", 1.0);
        // 一页pdf html页面生成的canvas高度;
        let pageHeight = (contentWidth / A4_WIDTH) * A4_HEIGHT;
        // 未生成pdf的html页面高度
        let leftHeight = contentHeight;
        // 页面偏移
        let position = 0;
        // a4纸的尺寸[592.28,841.89]，html页面生成的canvas在pdf中图片的宽高
        let imgWidth = A4_WIDTH;
        let imgHeight = (A4_WIDTH / contentWidth) * contentHeight;
        // 设置pdf的尺寸，pdf要使用pt单位 已知 1pt/1px = 0.75   pt = (px/scale)* 0.75
        let pdf = new JsPDF("", "pt", "a4");
        // 有两个高度需要区分，一个是html页面的实际高度，和生成pdf的页面高度
        // 当内容未超过pdf一页显示的范围，无需分页
        if (leftHeight < pageHeight) {
          pdf.addImage(pageData, "JPEG", 0, 0, imgWidth, imgHeight);
        } else {
          while (leftHeight > 0) {
            pdf.addImage(pageData, "JPEG", 0, position, imgWidth, imgHeight);
            leftHeight -= pageHeight;
            position -= A4_HEIGHT;
            // 避免添加空白页
            if (leftHeight > 0) {
              pdf.addPage();
            }
          }
        }
        // 直接下载
        pdf.save(params.title + ".pdf");
      });
    },

    isSplit(nodes, index, pageHeight) {
      if (
        nodes[index].offsetTop + nodes[index].offsetHeight < pageHeight &&
        nodes[index + 1] &&
        nodes[index + 1].offsetTop + nodes[index + 1].offsetHeight > pageHeight
      ) {
        return true;
      }
      return false;
    },
    // outPutPdfFn() {
    //   let vm = this;
    //   const A4_WIDTH = 592.28;
    //   const A4_HEIGHT = 841.89;
    //   vm.$nextTick(async () => {
    //     let target = vm.$refs.targetDom;
    //     let pageHeight = (target.scrollWidth / A4_WIDTH) * A4_HEIGHT;
    //     let lableListID = document.getElementsByClassName("target-node-item");
    //     for (let i = 0; i < lableListID.length; i++) {
    //       let multiple = Math.ceil(
    //         (lableListID[i].offsetTop + lableListID[i].offsetHeight) /
    //           pageHeight
    //       );
    //       if (this.isSplit(lableListID, i, multiple * pageHeight)) {
    //         let divParent = lableListID[i].parentNode; // 获取该div的父节点
    //         let newNode = document.createElement("div");
    //         newNode.style.background = "#ffffff";
    //         let _H =
    //           multiple * pageHeight -
    //           (lableListID[i].offsetTop + lableListID[i].offsetHeight);
    //         newNode.style.height = _H + 50 + "px";
    //         let next = lableListID[i].nextSibling; // 获取div的下一个兄弟节点
    //         // 判断兄弟节点是否存在
    //         if (next) {
    //           // 存在则将新节点插入到div的下一个兄弟节点之前，即div之后
    //           divParent.insertBefore(newNode, next);
    //         } else {
    //           // 不存在则直接添加到最后,appendChild默认添加到divParent的最后
    //           divParent.appendChild(newNode);
    //         }
    //       }
    //     }
    //     vm.$createPdf(target, "文件名", async (file) => {
    //       // file:blob对象
    //     });
    //   });
    // },
  },
};
</script>
<style scoped>
#home {
  width: 100%;
  height: 100%;
  overflow: hidden;
}
.test {
  width: 800px;
  height: 100%;
  border: 1px solid #ccc;
  margin: 20px auto;
  text-align: left;
  padding: 20px;
}
.editableDiv {
  margin: 20px auto;
  border: 1px solid #cccccc;
  text-align: left;
  width: 100%;
  min-height: 100px;
  box-sizing: border-box;
}
.chartDiv {
  overflow: hidden;
}
</style>
